<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./style.css">
</head>
<body>
    <audio id="j-bgm" src="./assets/bgm.mp3"></audio>
    <div class="music-btn off"></div>
    <div class="swiper-slide">
        <!-- 动画 -->
        <div class="view">
            <!-- 太阳 -->
            <div class="sun"></div>
            <!-- 秋千 -->
            <div class="art">
                <div class="swing">
                    <!-- 腿 -->
                    <div class="leg1">
                        <!-- 脚 -->
                        <div class="jiaojiao"></div>
                    </div>
                    <div class="leg2">
                        <div class="jiaojiao"></div>
                    </div>
                    <!-- 脖子 -->
                    <div class="neck"></div>
                    <div class="head">
                        <div class="part"></div>
                    </div>
                </div>
            </div>

            <!-- 文字 -->
            <div class="texts">
                <p class="text textAni">11月1日</p>
                <p class="text textAni">大概是很特别的一天</p>
                <p class="text textAni">这一天里</p>
                <p class="text textAni">TA把Richard Clayderma...的 《梦中的婚礼》</p>
                <p class="text textAni">反复听了 10次</p>
            </div>
        </div>
        <!-- 轮播图 -->
        <div class="view-cat"></div>
    </div>
    
    



    <script>
        const music_btn = document.querySelector('.music-btn')
        const bgMusic = document.getElementById('j-bgm')
        const text = document.querySelector('.texts')
        let isPlay = true

        music_btn.addEventListener('click',function (){
            // 找到名为 “music_btn” 的元素，切换它的类列表中名为 “off” 的类。
            // 如果该元素原本有 “off” 类，则移除它；如果没有，则添加它
            music_btn.classList.toggle('off')
            isPlay = !isPlay
            if (!isPlay){
                // 音乐媒体播放
                bgMusic.play()
            } else{
                // 音乐媒体暂停
                bgMusic.pause()
            }
        })
        setTimeout(() => {
            console.log(text.classList)

            text.classList.add('z-enter')
            console.log(text.classList)
        }, 1000);


    </script>

    <script>
       const swiper_slide = document.querySelector('.swiper-slide')
       let translateValue = 0
       let page = 0
       swiper_slide.addEventListener('click', function(){
            page+=1
            translateValue = -667 * (page % 2)
            console.log(page)
            swiper_slide.style.transform = `translateY(${translateValue}px)`;
       })
    </script>
</body>
</html>